<template>
  <div class="wholesaleInfo">
    <el-form :model="form" :label-suffix="isView ? ':' : ''" :hide-required-asterisk="isView" :rules="wholesaleInfoFormRules" ref="formRef" label-width="80px">
      <el-form-item label="批发状态" prop="wholesaleStatus">
        <div v-if="!isView">
          <el-radio-group v-model="form.wholesaleStatus">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停发</el-radio>
          </el-radio-group>
          <div class="tips lineHeight">正常时集团总部可以向各个部门批发产品/物资</div>
        </div>
        <span v-else>{{ form.wholesaleStatus === 1 ? '正常':'停发' }}</span>
      </el-form-item>
      <template v-if="form.wholesaleStatus === 1">
        <el-form-item label="批发价" prop="wholesalePrice">
          <el-input v-if="!isView" class="w260" v-model.trim="form.wholesalePrice" placeholder="请输入" 
            @input="()=>{form.wholesalePrice=limitFloat(form.wholesalePrice)}"
            @blur="()=>{form.wholesalePrice=giveFloatMin(form.wholesalePrice)}"
            />
          <span v-else>{{ form.wholesalePrice }}</span>
        </el-form-item>
        <el-form-item label="批发分类" prop="wholesaleClass">
          <el-select v-if="!isView" v-model="form.wholesaleClass" multiple filterable collapse-tags collapse-tags-tooltip placeholder="请选择"
            class="w260">
            <el-option v-for="item in wholesaleClassOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
          <span v-else>{{ form.wholesaleClass.join(',') }}</span>
        </el-form-item>
        <el-form-item label="起购数量" prop="minimumOrderQuantity">
          <el-input v-if="!isView" class="w260" v-model.trim="form.minimumOrderQuantity" placeholder="请输入" 
            @input="()=>{form.minimumOrderQuantity=limitInt(form.minimumOrderQuantity)}"
            @blur="()=>{form.minimumOrderQuantity=giveIntMin(form.minimumOrderQuantity)}"
          />
          <span v-else>{{ form.minimumOrderQuantity }}</span>
        </el-form-item>
        <el-form-item label="产品详情" prop="detail" :rules="imgRules">
          <div class="w100">
            <el-input v-if="!isView" class="inputDetail" :maxlength="500" placeholder="请输入" v-model.trim="form.detail" type="textarea"
              :rows="5"></el-input>
            <div v-else>{{ form.detail }}</div>
            <div v-if="!isView">
              <UploadImg :maxImgLength="20" :imageListUrlInfo="form.imgs" :multiple="true" @backValue="backValueImg">
              </UploadImg>
              <div class="tips">支持jpg、jpeg、png格式；最多20张，单张不超过5M</div>
            </div>
            <template v-else>
              <div class="imgBox">
                <el-image 
                    class="imgItemBox" 
                    v-for="(item,index) in form.imgs" 
                    :key="index" 
                    :src="item"
                    :preview-src-list="form.imgs"
                    :initial-index="index"
                    fit="contain"
                  ></el-image>
              </div>
            </template>
          </div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { useCommonData } from '../Hooks/index'
import UploadImg from '@/components/UploadImg/index.vue'
import { wholesaleInfoFormRules } from './rules.js'
import { limitFloat,limitInt,giveIntMin,giveFloatMin } from '@/utils/common'

const props = defineProps({
  isView: {
    type: Boolean,
    default: false
  }
})
const formRef = ref();
const form = ref({
  wholesaleStatus: 2,
  wholesalePrice: null,
  wholesaleClass: [],
  minimumOrderQuantity: 1,
  detail: "",
  imgs: [],
});
const imgRules = [{
  required: true,
  validator: (rule, value, callback) => {
    if (!form.value.imgs.length && !form.value.detail) {
      callback(new Error("请上传图片或填写详情"));
    } else {
      callback();
    }
  },
  trigger: "blur",
}]
const {
  wholesaleClassOptions
} = useCommonData()

const backValueImg = (value) => {
  form.value.imgs = value;
  formRef.value.validateField('detail');
}
const reset = ()=>{
  formRef.value.resetFields()
  form.value.imgs = []
}
defineExpose({
  formRef,
  form,
  reset
})
</script>

<style lang="less" scoped>
.tips {
  color: #666;
  font-size: 12px;
  width: 450px;
}
.lineHeight{
  line-height: 12px;
}

.wholesaleInfo {
  margin-top: 24px;

  .inputDetail {
    width: 260px;
    margin-bottom: 16px;

    :deep(.el-textarea__inner) {
      padding: 9px 16px;
    }
  }
}

.w260 {
  width: 260px;
}

.imgBox{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  .imgItemBox{
    width: 160px;
    height: 160px;
    border-radius: 16px;
    border: 1px solid #DDD;
  }
}
</style>